<template>
    <!-- 组件的模板 -->
    <div class="userinfo">
        <div class="profile">
            <!--<div v-show="item.logo_url" class="bg" style="background-image: url('static/imgs/avatar.jpg')"></div>-->
            <div v-show="item.logo_url" class="bg" :style="{backgroundImage: 'url(' + item.logo_url + ')'}"></div>
            <div class="bg-mask"></div>
            <img v-if="item.logo_url" @click="uploadAvatar" class="avatar" :src="item.logo_url">
            <img v-else @click="uploadAvatar" class="avatar" src="../../static/imgs/camera.png">
            <p class="tip" v-show="!item.logo_url">点击上传头像，让工作更高效</p>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input v-on:input="validateName" v-model="item.real_name"  class="weui-input" type="text" placeholder="请输入你的真实姓名" value="{{item.real_name}}">
                </div>
            </div>
            <a  @click="setGender" class="weui-cell weui-cell_access weui-cell_select weui-cell_select-after">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">性别</label>
                </div>
                <div class="weui-cell__bd">
                    <div v-show="genderIsSelected" class="weui-select selected" :value="item.genderIdx">{{item.gender}}</div>
                    <div v-show="!genderIsSelected" class="weui-select" :value="item.genderIdx">请选择</div>
                </div>
            </a>
        </div>
        <a @click="saveuserInfo" class="weui-btn weui-btn_primary">完成</a>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */

    import clientInfo from 'gapi/clientInfo'
    import widget from 'gapi/widget.js'
    import clientUi from 'gapi/clientUi.js'
    import * as util from 'js/util.js'
    import $ from 'zepto'
    import userCenterApi from 'clientApi/userCenterApi'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
               item: {
                 gender: '',
                 genderIdx: 0,
                 logo_url: '',
               },
               logo_url_edit:'',
               genderList: {
                   data1: ['男', '女'],
               },
               genderIsSelected: false,
               picDomain : 'http://image.doumi.com/',
               disabled: true,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                //获取用户资料信息
                this.getUserInfo();
            },
            /**
             * 获取个人资料
             */
            getUserInfo (){
              util.ajax({
                    url:'/user/info',
                    type:'GET',
                    data:{
                        team_id :0,//default 0
                        project_id:0//default 0
                    },
                    timeout:10000,
                    beforeSend: () => {

                    },
                    success:(result) => {
                        // alert(JSON.stringify(result))
                        if(result.errno == 0){
                          this.item = result.data
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        console.log(xhr)
                    },
                    complete: () => {

                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
              },
            /**
             * 监听姓名, 用于修改userInfoIscompleted -> disabled button
             * @method validateName
             * @public
             * @return {Null} void
             */
            validateName (){
                this.disabled = (this.item.real_name && this.item.gender) ? false : true
            },
            /**
             * 提交个人资料
             * @method submituserInfo
             * @public
             * @return {Null} void
             */
            saveuserInfo (){
                //校验通过之后 todo button -> remove disabled class
                if (!this.item.real_name) {
                  widget.toast('请输入你的真实姓名')
                  return
                }else if (this.item.real_name.length > 10) {
                    widget.toast('姓名不能超过10个字')
                    return
                }else if (!this.item.genderIdx) {
                  widget.toast('请选择性别')
                  return
                }
                util.ajax({
                    url:'/user/info/edit',
                    type:'GET',
                    data:{
                        team_id: 0,//default 0
                        project_id : 0,//default 0
                        real_name: this.item.real_name,
                        gender: this.item.genderIdx,
                        logo: this.item.logo_url.replace(this.picDomain, '') //需要去掉域名
                        // logo: this.logo_url_edit   //需要去掉域名
                    },
                    timeout:10000,
                    beforeSend: () => {

                    },
                    success:(result) => {
                        // alert(JSON.stringify(result))
                        if(result.errno == 0){
                          const name = this.item.real_name
                         //给客户端传递用户name,登录用来判定是否完善了资料
                         userCenterApi.userInfoCompleted(name, (data) => {
                             widget.toast('保存成功')
                             location.href="dmsaas://ProjectList"
                           })
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        console.log(xhr)
                    },
                    complete: () => {

                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //选择性别
            setGender (){
                clientUi.showPicker(this.genderList,['0'], '', (data) => {
                    let selectedIdx =data.data1//返回选中的index
                    this.genderIsSelected = true
                    this.item.genderIdx = parseInt(selectedIdx) + 1//给服务端的索引
                    this.item.gender = this.genderList.data1[selectedIdx]//页面展示性别
                })
            },
            //上传头像
            uploadAvatar (){
                clientUi.selectAndUploadImage( data => {
                    if(data.status == '1'){
                        this.item.logo_url = this.picDomain + data.imageURL
                        // this.logo_url_edit = data.imageURL
                        // console.log(this.item.logo_url)
                        // console.log(this.logo_url_edit)
                    }else{
                        widget.toast('上传失败');
                    }
                });
            },
        },
        created(){

            this.init();

        },
        ready (){

        }
    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/userinfo.css"></style>
